<template>
    <!-- 视图部分 -->
    <div class="main">
        <van-list v-model='loading' :finished='finished' finished-text='已经到底了' @load="onLoad">
        <van-card v-for='item in list' :key="item.filmId" @click="goDetail(item.filmId)">
            <template #desc>
                <div class="desc">
                    <div>
                        主演：{{ item.actors | parseActors }}
                    </div>
                    <div>
                        上映日期：{{ item.premiereAt | turnTime}}
                    </div>
                </div>
            </template>
            <template #title>
                    <div class="title">{{item.name}}</div>
            </template>
            <!-- 电影缩略图 -->
            <template #thumb>
                <img :src="item.poster" width="66" />
            </template>
            <template #tags>
                <van-tag plain class="orderTicket" size="large" type="danger">购票</van-tag>
            </template>
        </van-card>
        </van-list>
    </div>
</template>

<script>
// 逻辑部分
import Vue from "vue";
import { Card, Tag, List } from "vant";
Vue.use(Card);
Vue.use(Tag);
Vue.use(List);
import uri from "@/config/uri";
export default {
    data(){
        return{
            pageNum:1,
            pageSize:10,
            list:[],
            loading:false,
            finished:false,
        };
    },
    methods:{
        onLoad(){
            this.$http.get(uri.getComingSoon+'?pageNum='+this.pageNum+'pageSize='+this.pageSize).then((ret)=>{
                //获取最大页码
                let maxPageNum=Math.ceil(ret.data.total/this.pageSize);
                this.list=[...this.list,...ret.data.films];
                //本次请求已经完成
                this.loading=false;
                if(this.pageNum<maxPageNum){
                    this.pageNum++;
                }else{
                    //说明已经全部加载完毕
                    this.finished=true;
                }
            })
        },
        goDetail(filmId) {
            // 编程式导航
            this.$router.push("/film/" + filmId);
        },
        
    },
    filters:{
        parseActors(actors){
            let str='';
            if(actors){
                actors.forEach((el)=>{
                    str+=el.name +" ";
                });
            }else{
                str='暂无主演';
            }
            //注意长度的截取
            return str.length>17?str.substr(0,17)+'...':str;
        },
        turnTime(times){
            times=times*1000;
            times=new Date(times);
            let week=["日","一","二","三","四","五","六"];
            let Month=times.getMonth()?times.getMonth():12;
            let day=times.getDate();
            let n=times.getDay();
            return "周"+week[n]+" "+Month+"月"+day+"日";
        }
    }
}
</script>

<style scoped>
/* 样式部分 */
/* 解决图片自带的圆角 */
.van-card__thumb img {
    border-radius: 0px;
    height:100px;
}
/* 重写图片右侧的边距 */
.van-card__thumb {
    width: 70px;
}
/* 电影名称 */
.title {
    font-size: 16px;
    margin-top:20px;
}
/* 描述样式 */
.desc {
    font-size: 13px;
    color: #797d82;
}
/* 购票按钮 */
.orderTicket {
    position: relative;
    float: right;
    top: -35px;
    color: orange;
}
/* 防止最后一个被挡住 */
.main {
    margin-bottom: 50px;
}
</style>